<html>

<head>
<title>Blandband test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.mediaplayer.js"></script>

<script type="text/javascript">

//var bandCamp = new BandCamp();
    //var soundCloud = new SoundCloud();
    var player = $.MediaPlayer();
$(document).ready(function(){

//	player.$.bind('OnPlay', function(e, track){
//		alert(track.name);
//	});
//	player.ctrls.Play();

//	player.AddTrack('http://www.youtube.com/watch?v=opk4x7jzRS4&feature=feedrec_grec_index');



	var $info = $('.info');
	//$info.text('loading');
	var mp3Player = $('.mp3Player').mp3player({
		//mp3Url: 'http://soundcloud.com/beschizza/chip-world',
		playerOptions: {
			volume: 0.5,
			autoPlay: false,
			showControls: false
		},
		onPlayerReady: function(){
			$info.text('player ready');
		},
		onTrackPlaying: function(){
			$info.text('track playing');
		},
		onTrackEnded: function(){
			$info.text('track ended');
			if($('.rptCheckBox').is(':checked'))
				PlayNext();
		},
		onError: function(errorMsg){
			$info.text(errorMsg);
		}
	});
	
	var ytPlayer = $('.ytPlayer').YouTubePlayer({
		playerOptions: {
			volume: 80,
			autoPlay: false
		},
		onVideoPlaying: function(){
			$info.text('video playing');
		},
		onVideoEnded: function(){
			$info.text('video ended');
			if($('.rptCheckBox').is(':checked'))
				PlayNext();
		},
		onError: function(errorMsg){
			$info.text(errorMsg);
		}
	});
	
	$('.addToPlaylistBtn').click(function(){
		var obj = $(this).parent();
		var inp = obj.find('input.trackUrl')
		var url = inp.val();
		obj.slideToggle(120);
		if(inp.hasClass('soundCloudLink')){
			soundCloud.GetTrack(url, function(track){
				var mp3Url = track.stream_url+'?client_id=c1af380adee9db6a9c1b9bd493d9ba4c';
				AddToPlaylist(track.title, mp3Url);
				obj.slideToggle(120);
			});
		}
		else if(inp.hasClass('bandCampLink')){
			bandCamp.GetTrack(url, function(track){
				var mp3Url = track.streaming_url;
				AddToPlaylist(track.title, mp3Url);
				obj.slideToggle(120);
			});
		}
		else if(inp.hasClass('youtubeLink')){
			AddToPlaylist(url, url);
			obj.slideToggle(120);
		}
	});
	$('.playBtn').click(function(){
		PlayNext();
	})
	$('.pauseBtn').click(function(){
		mp3Player.Pause();
	})
	$('.stopBtn').click(function(){
		mp3Player.Stop();
	})
	function AddToPlaylist(title, mp3Url){
		$('<li />').text(title).attr('title', mp3Url).appendTo('.playlist');
	}
	function PlayNext(){
		var tracks = $('.playlist').children();
		var nextTrack = $('ol.playlist li.playing').next()
		if(nextTrack.length === 0)
			nextTrack = $(tracks[0]);
		tracks.removeClass('playing');
		nextTrack.addClass('playing');
		var trackUrl = nextTrack.attr('title');
		mp3Player.Stop();
		ytPlayer.Stop();
		if(trackUrl.indexOf('youtube') > 0)
			ytPlayer.PlayUrl(trackUrl);
		else
			mp3Player.PlayUrl(trackUrl, true);
		$info.text('track loading...');
	}
});
</script>
<style>
body{
	font-family:arial;
	font-size: 12px;
	
}
.ytPlayer{
		width: 1px;
	height: 1px;
	position: absolute;
	left: -1px;
	top: 0px;
}
.mp3Player{
	width: 1px;
	height: 1px;
	position: absolute;
	left: -1px;
	top: 0px;
}
ol.playlist{
	margin: 1px;
	padding-left: 16px;
}
.info{
	color: #ff3300;
	font-size: 10px;
	font-weight: bold;
	display: block;
}
li.playing{
	color: #ff3300;
}
div.content{
	border: 1px solid #ccc;
	width: 500px;
	margin-bottom: 20px;
	padding: 20px;
}
</style>
</head>

<body>
<div class="content">
	<div class="mp3Player" id="mp3Player"></div>
	<div class="ytPlayer" id="ytPlayer"></div>
	<input type="submit" value="play" class="playBtn" />
	<input type="submit" value="pause" class="pauseBtn" />
	<input type="submit" value="stop" class="stopBtn" />
	<label><input type="checkbox" class="rptCheckBox" />Repeat playlist</label>
	<strong class="info">info</strong>
	<h2>Playlist</h2>
	<ol class="playlist"></ol>
</div>
<!--soundcloud-->
<div class="soundCloud content">
	<p>
	Paste a soundcloud track url in the textbox and press add to playlist to do just that<br />
	<code>http://soundcloud.com/beschizza/chip-world</code>
	</p>
	<input type="text" class="soundCloudLink trackUrl" />
	<input type="submit" class="addToPlaylistBtn" value="Add to playlist" />
</div>
<!--bandCamp-->
<div class="bandCamp content">
	<p>
	Paste a bandCamp track url in the textbox and press add to playlist to do just that<br />
	<code>http://aquaticson.bandcamp.com/track/mos-def-ms-fatbooty-quatic-remix</code>
	</p>
	<input type="text" class="bandCampLink trackUrl" />
	<input type="submit" class="addToPlaylistBtn" value="Add to playlist" />
</div>
<!--youtube-->
<div class="youtube content">
	<p>
	Paste a youtube url in the textbox and press add to playlist to do just that<br />
	<code>http://www.youtube.com/watch?v=opk4x7jzRS4&feature=feedrec_grec_index</code>
	</p>
	<input type="text" class="youtubeLink trackUrl" />
	<input type="submit" class="addToPlaylistBtn" value="Add to playlist" />
</div>

</body>
</html>
